<template>
	<div class="content">
		<mt-header fixed title="课堂抢答" class="nav">
    	<mt-button icon="back" slot="left" @click="back"></mt-button>	

		</mt-header>
		<div class="head"></div>
		<div class="container">
			<div v-for="item in rewardData">
				<div class="left"></div>
				<div class="right">
					<div class="up">
						 {{ item.coursename }}
					</div>
					<div class="down">
						<p>{{ item.teachername }}老师&nbsp;&ndash;&nbsp;{{ item.uptime }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../../api'
	import { mapState, mapMutations } from 'vuex'
	import $ from 'jquery'
	export default{
		activated(){
			this.INIT_STATE();
			var that=this
			api.getStudentLessonrecordsOfCompetitive({
				studentid:this.userlogin.uid,
				classid:this.userlogin.classid,
				day:this.$route.params.day
			}).then(response=>{
				console.log(response)
				that.rewardData=response.data.data;
				$(function(){
		var h=document.body.clientHeight;
		$('.content').css('min-height', h-44-44+'px')
		$('.container').css('min-height', h-80-44+'px')
  	})
			})
		},
		data() {
			return{
				rewardData:[
				]
			}
		},
		computed:{
			...mapState(['userlogin'])
		},
		methods:{
			...mapMutations(['INIT_STATE']),
		back(){
			window.history.back()
		}
		}
	}
</script>

<style scoped>
	.content{
		padding-bottom: 0;
	}
	.head{
		height: 80px;
		background: url(../../assets/images/rewardHead.png) no-repeat;
		background-size: cover;
	}
	.container{
		background: #F7F7F7;
		position: relative;
		height: 100%;
	}
	.container:before{
		height: 100%;
		width: 3px;
		background-color: #E3E3E3;
		content:'';
		left: 0.78rem;
		position: absolute;
	}
	.container>div{
		display: flex;
		height: 1.2rem;
		padding-top: 0.5rem;
	}
	.container>div>.left{
		flex: 1;
		background: url(../../assets/images/star1.png) no-repeat;
		background-size: 0.8rem;
		background-position: center;	
		z-index: 2;		
	}
	.container>div>.right{
		flex: 3;
		font-size: 12px;
		color: #9B9B9B;
		background: white;
		margin-right: 0.4rem;
		text-align: left;
		padding-left: 0.3rem;
	}
	.container>div>.right>.up{
		height: 0.7rem;
		line-height: 0.7rem;
		font-size: 14px;
		font-family: FZLTHK--GBK1-0;
		color: #3C3C3C;
	}
	.container>div>.right>.down p{
		margin: 0;
		font-family: FZLTHK--GBK1-0;
		font-size: 12px;
		color: #A5A5A5;
	}
</style>